import { INPUT_CONSTRAINTS } from '@/pages/workflow/components/InspectData'
import { variableSourceTypeOptions } from '@/pages/workflow/constants'
import { Input, Select } from 'antd'
import { produce } from 'immer'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { InputVar, MoreInfo } from '../../types'

type Props = {
  payload: InputVar
  citeOptions: any[]
  onChange?: (item: InputVar, moreInfo?: MoreInfo) => void
  onRemove?: () => void
  itemIndex: number
}

const ParamItem: FC<Props> = ({ payload, itemIndex, citeOptions, onChange = () => {}, onRemove = () => {} }) => {
  const handlePayloadChange = useCallback(
    (key: string) => {
      return (value: any) => {
        const newPayload = produce(payload, draft => {
          draft[key] = value
        })
        onChange(newPayload, undefined)
      }
    },
    [payload, onChange]
  )

  // value_selector存[id,variable]时,value存id,variable，方便回显
  const handleCiteValChange = useCallback(
    (key: string) => {
      return (value: any) => {
        const newPayload = produce(payload, draft => {
          draft.value = value
          draft[key] = value.split(',')
        })
        onChange(newPayload, undefined)
      }
    },
    [payload, onChange]
  )

  const handleTypeChange = useCallback(
    (key: string) => {
      return (value: any) => {
        const newPayload = produce(payload, draft => {
          draft[key] = value
          draft.value = undefined
          draft.value_selector = undefined
        })
        onChange(newPayload, undefined)
      }
    },
    [payload, onChange]
  )

  return (
    <div className="flexRowStart flexRowJustBet mt-[8px]">
      <div className="flexRowStart flexRowJustBet w-[92%]">
        <Input
          value={payload.variable}
          defaultValue={payload.variable}
          placeholder="输入参数名"
          className="w-[140px]"
          onChange={e => {
            const newValue = e.target.value
            if (
              newValue.length <= INPUT_CONSTRAINTS.NAME_MAX_LENGTH &&
              (newValue === '' || /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(newValue))
            ) {
              handlePayloadChange('variable')(newValue)
            }
          }}
          draggable="false"
        />
        <div style={{ width: 'calc(100% - 140px)' }}>
          <Select
            defaultValue={payload.type}
            placeholder="请选择"
            disabled
            placement="bottomLeft"
            style={{ width: '40%', pointerEvents: 'auto' }}
            onChange={val => handleTypeChange('type')(val)}
            options={variableSourceTypeOptions}
          ></Select>
          {payload.type === 'cite' ? (
            <Select
              defaultValue={payload.value}
              placeholder="请选择"
              placement="bottomLeft"
              style={{ width: '60%', pointerEvents: 'auto' }}
              onChange={val => handleCiteValChange('value_selector')(val)}
              options={citeOptions}
            ></Select>
          ) : (
            <Input
              defaultValue={payload.value}
              placeholder="输出参数值"
              style={{ width: '60%' }}
              maxLength={INPUT_CONSTRAINTS.DESCRIPTION_MAX_LENGTH}
              onChange={e => handlePayloadChange('value')(e.target.value)}
            />
          )}
        </div>
      </div>

      {itemIndex > 0 && (
        <div onClick={onRemove} className="flex cursor-pointer items-center justify-center text-[#888d92]">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 2C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"
            ></path>
          </svg>
        </div>
      )}
    </div>
  )
}

export default React.memo(ParamItem)
